<!-- 我的 个人主页 -->
<template>
  <div class="profile-container">
    <div class="profile-header">
      <div class="header-content">
        <el-avatar :size="140" :src="user.avatar" /> <!-- 头像变大 -->
        <div class="profile-info">
          <div class="name-row">
            <h2>{{ user.name }}</h2>
            <el-tag v-if="user.gender === 'male'" type="primary" size="small" class="gender-tag">
              <el-icon><Male /></el-icon> 男
            </el-tag>
            <el-tag v-else-if="user.gender === 'female'" type="danger" size="small" class="gender-tag">
              <el-icon><Female /></el-icon> 女
            </el-tag>
          </div>
          
          <div class="id-row">
            <span>小红书号：{{ user.redId }}</span>
            <span class="ip-location">IP属地：{{ user.location }}</span>
          </div>
          
          <div class="bio-tag">
            <span>{{ user.bio }}</span>
          </div>
          
          <div class="stats">
            <div class="stat-item" @click="showFollowersDialog1">
              <span class="stat-value">{{ user.following }}</span>
              <span class="stat-label">关注</span>
            </div>
            <div class="stat-item" @click="showFollowingDialog1">
              <span class="stat-value">{{ user.followers }}</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-item" @click="showNotesDialog1">
              <span class="stat-value">{{ user.notes }}</span>
              <span class="stat-label">笔记</span>
            </div>
            <div class="stat-item" @click="showLikesDialog1">
              <span class="stat-value">{{ user.likes }}</span>
              <span class="stat-label">获赞</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tabs-container">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="我的笔记" name="notes"></el-tab-pane>
        <el-tab-pane label="点赞" name="likes"></el-tab-pane>
        <el-tab-pane label="收藏" name="collections"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="profile-content">
      <div v-if="activeTab === 'notes'" class="notes-grid">
        <div v-for="note in user.myNotes" :key="note.id" class="note-item" @click="showNoteDetailDialog(note)">
          <img :src="note.image" alt="note image" />
          <div class="note-stats">
            <span><el-icon><xin /></el-icon> {{ note.views }}</span>
            <span><el-icon><ChatDotRound /></el-icon> {{ note.comments }}</span>
            <span><el-icon><Star /></el-icon> {{ note.likes }}</span>
          </div>
        </div>
      </div>


      <div v-else-if="activeTab === 'likes'" class="notes-grid">
        <div v-for="note in likedNotes" :key="note.id" class="note-item" @click="showNoteDetailDialog(note)">
          <img :src="note.image" alt="note image" />
          <div class="note-stats">
            <span><el-icon><xin /></el-icon> {{ note.views }}</span>
            <span><el-icon><ChatDotRound /></el-icon> {{ note.comments }}</span>
            <span><el-icon><Star /></el-icon> {{ note.likes }}</span>
          </div>
        </div>
      </div>

      <div v-else-if="activeTab === 'collections'" class="notes-grid">
        <div v-for="note in collectedNotes" :key="note.id" class="note-item" @click="showNoteDetailDialog(note)">
          <img :src="note.image" alt="note image" />
          <div class="note-stats">
            <span><el-icon><xin /></el-icon> {{ note.views }}</span>
            <span><el-icon><ChatDotRound /></el-icon> {{ note.comments }}</span>
            <span><el-icon><Star /></el-icon> {{ note.likes }}</span>
          </div>
        </div>
      </div>

      
    </div>

    <!-- 关注列表弹窗 -->
    <el-dialog v-model="showFollowingDialog" title="关注列表" width="50%">
      <div class="user-list">
        <div v-for="user in followingList" :key="user.id" class="user-item">
          <el-avatar :size="50" :src="user.avatar" />
          <div class="user-info">
            <span class="username">{{ user.name }}</span>
            <span class="bio">{{ user.bio }}</span>
          </div>
          <el-button 
            v-if="!user.isFollowing" 
            type="danger" 
            size="small"
            @click="followUser(user)"
          >
            关注
          </el-button>
          <el-button 
            v-else 
            type="info" 
            size="small"
            @click="unfollowUser(user)"
          >
            已关注
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 粉丝列表弹窗 -->
    <el-dialog v-model="showFollowersDialog" title="粉丝列表" width="50%">
      <div class="user-list">
        <div v-for="user in followersList" :key="user.id" class="user-item">
          <el-avatar :size="50" :src="user.avatar" />
          <div class="user-info">
            <span class="username">{{ user.name }}</span>
            <span class="bio">{{ user.bio }}</span>
          </div>
          <el-button 
            v-if="!user.isFollowing" 
            type="danger" 
            size="small"
            @click="followUser(user)"
          >
            回关
          </el-button>
          <el-button 
            v-else 
            type="info" 
            size="small"
            @click="unfollowUser(user)"
          >
            互相关注
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 笔记列表弹窗 -->
    <el-dialog v-model="showNotesDialog" title="笔记列表" width="70%">
      <div class="notes-list">
        <div v-for="note in allNotes" :key="note.id" class="note-list-item">
          <img :src="note.image" alt="note image" class="note-thumbnail" />
          <div class="note-info">
            <h4>{{ note.title }}</h4>
            <p>{{ note.description }}</p>
            <div class="note-stats">
              <span><el-icon><xin /></el-icon> {{ note.views }}</span>
              <span><el-icon><ChatDotRound /></el-icon> {{ note.comments }}</span>
              <span><el-icon><Star /></el-icon> {{ note.likes }}</span>
            </div>
          </div>
          <div class="note-actions">
            <el-button size="small" @click="editNote(note)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteNote(note)">删除</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 获赞列表弹窗 -->
    <el-dialog v-model="showLikesDialog" title="获赞列表" width="50%">
      <div class="likes-list">
        <div v-for="like in likesList" :key="like.id" class="like-item">
          <el-avatar :size="50" :src="like.user.avatar" />
          <div class="like-info">
            <span class="username">{{ like.user.name }}</span>
            <span class="action">赞了你的笔记</span>
            <span class="note-title">{{ like.noteTitle }}</span>
          </div>
          <span class="time">{{ formatTime(like.time) }}</span>
        </div>
      </div>
    </el-dialog>


     <!-- 帖子详情弹窗 -->
    <el-dialog
      v-model="showNoteDetail"
      :fullscreen="isMobile"
      :show-close="false"
      custom-class="note-detail-dialog"
      @close="closeDetail"
    >
      <div class="note-detail-container">
        <!-- 左侧图片区域 - 全屏无间距 -->
        <div class="detail-left">
          <div class="image-container">
            <img :src="currentNote.images[currentImageIndex]" alt="note image" />
            <div v-if="currentNote.images.length > 1" class="side-nav-arrows">
              <div class="nav-arrow left" @click.stop="prevImage">
                <el-icon><ArrowLeft /></el-icon>
              </div>
              <div class="nav-arrow right" @click.stop="nextImage">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
            <div v-if="currentNote.images.length > 1" class="dot-indicators">
              <div
                v-for="(img, index) in currentNote.images"
                :key="index"
                class="dot"
                :class="{ active: currentImageIndex === index }"
                @click.stop="currentImageIndex = index"
              ></div>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 - 可滚动 -->
        <div class="detail-right">
          <div class="scroll-content">
            <!-- 用户信息区域 -->
            <div class="user-infoo">
              <el-avatar :size="50" :src="currentNote.author.avatar" />
              <div class="user-meta">
                <span class="username">{{ currentNote.author.name }}</span>
                <span class="follow-count">{{ currentNote.author.followers }} 粉丝</span>
              </div>
              <el-button
                v-if="!currentNote.author.isFollowing"
                type="danger"
                round
                class="follow-btn"
                @click="followAuthor"
              >
                关注
              </el-button>
              <el-button
                v-else
                type="info"
                round
                class="follow-btn"
                @click="sendMessage"
              >
                私信
              </el-button>
            </div>

            <el-divider />

            <!-- 帖子内容 -->
            <div class="note-content">
              <h2>{{ currentNote.title }}</h2>
              <p>{{ currentNote.content }}</p>
            </div>

            <el-divider />

            <!-- 评论区 -->
            <div class="comments-section">
              <h3>评论 ({{ currentNote.comments.length }})</h3>
              <div class="comment-list">
                <div
                  v-for="comment in currentNote.comments"
                  :key="comment.id"
                  class="comment-item"
                  :style="{ 'margin-left': comment.level * 20 + 'px' }"
                >
                  <el-avatar :size="40" :src="comment.author.avatar" />
                  <div class="comment-content">
                    <div class="comment-header">
                      <span class="comment-author">{{ comment.author.name }}</span>
                      <span class="comment-time">{{ formatTime(comment.time) }}</span>
                    </div>
                    <p class="comment-text">{{ comment.content }}</p>
                    <div v-if="comment.images" class="comment-images">
                      <img
                        v-for="(img, idx) in comment.images"
                        :key="idx"
                        :src="img"
                        alt="comment image"
                        @click="showImagePreview(img)"
                      />
                    </div>
                    <div class="comment-actions">
                      <span @click="likeComment(comment.id)">
                        <el-icon><Star /></el-icon> {{ comment.likes }}
                      </span>
                      <span @click="replyToComment(comment)">回复</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 固定评论框 -->
          <div class="fixed-comment-input">
            <el-input
              v-model="newComment"
              placeholder="写下你的评论..."
              class="comment-input"
            >
              <template #append>
                <el-button type="primary" @click="submitComment">发送</el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { View as xin, ChatDotRound, Star, Male, Female } from '@element-plus/icons-vue'

const activeTab = ref('notes')

// 用户数据
const user = ref({
  name: 'momo',
  avatar: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcNWWABQnDADs7ZJavtts749.jpg',
  redId: '2838921327',
  location: '浙江',
  bio: '天生爱自由！',
  gender: 'female',
  following: 123,
  followers: 456,
  notes: 78,
  likes: 9999,
  myNotes: [
    // 原有笔记数据...
	{
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfio9yAHy9qAHBTGlC6uSo405.JPG',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.101.178:8888/group1/M00/00/00/wKhlsmfbuN2AevnIADZ9bSMAaRA441.jpg',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcNiOAbWkWABJ6sZaBpdk464.jpg',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcGPKAEPe1ADs7ZJavtts059.jpg',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcTCOALxbGADZ9bSMAaRA297.jpg',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcTbCALvOTAAOgW1ZU2yw218.jpg',
    views: 1000,
    comments: 45,
    likes: 200
  },
  ]
})

// 弹窗控制状态
const showFollowingDialog = ref(false)
const showFollowersDialog = ref(false)
const showNotesDialog = ref(false)
const showLikesDialog = ref(false)

// 模拟数据
const followingList = ref([])
const followersList = ref([])
const allNotes = ref([])
const likesList = ref([])

// 初始化模拟数据
const initMockData = () => {
  // 关注列表数据
  followingList.value = Array.from({ length: 15 }, (_, i) => ({
    id: i + 1,
    name: `关注用户${i + 1}`,
    avatar: `https://randomuser.me/api/portraits/${i % 2 === 0 ? 'men' : 'women'}/${i + 10}.jpg`,
    bio: ['旅行达人', '美食爱好者', '摄影发烧友', '健身教练', '美妆博主'][i % 5],
    isFollowing: true
  }))

  // 粉丝列表数据
  followersList.value = Array.from({ length: 20 }, (_, i) => ({
    id: i + 100,
    name: `粉丝用户${i + 1}`,
    avatar: `https://randomuser.me/api/portraits/${i % 2 === 0 ? 'women' : 'men'}/${i + 15}.jpg`,
    bio: ['新晋小红薯', '你的忠实粉丝', '同城好友', '校友', '同事'][i % 5],
    isFollowing: i % 3 === 0
  }))

  // 笔记列表数据
  allNotes.value = Array.from({ length: user.value.notes }, (_, i) => ({
    id: i + 200,
    image: `http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfhM4OAB78eADZ9bSMAaRA826.jpg`,
    title: ['夏日穿搭', '美食探店', '旅行日记', '健身打卡', '美妆分享'][i % 5] + (i + 1),
    description: '这是我的第' + (i + 1) + '篇笔记，分享我的生活点滴...',
    views: Math.floor(Math.random() * 10000),
    comments: Math.floor(Math.random() * 500),
    likes: Math.floor(Math.random() * 3000),
    time: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000)
  }))

  // 获赞列表数据
  likesList.value = Array.from({ length: 10 }, (_, i) => ({
    id: i + 300,
    user: {
      name: [`用户${i + 1000}`, '小红', '小明', '小美', '旅行达人'][i % 5],
      avatar: `https://randomuser.me/api/portraits/${i % 2 === 0 ? 'women' : 'men'}/${i + 20}.jpg`
    },
    noteTitle: ['夏日穿搭分享', '上海美食探店', '杭州旅行攻略', '健身30天变化', '日常妆容分享'][i % 5],
    time: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000)
  }))
}

// 模拟数据
const likedNotes = ref([
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfio9yAHy9qAHBTGlC6uSo405.JPG',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfhNCaAM5gzADtjTQY2JOk286.JPG',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfio9yAHy9qAHBTGlC6uSo405.JPG',
    views: 1000,
    comments: 45,
    likes: 200
  },
  {
    id: 101,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfhM-SAPNF5ADs7ZJavtts019.jpg',
    views: 1000,
    comments: 45,
    likes: 200
  },
  // 更多点赞的笔记...
])

const collectedNotes = ref([
  {
    id: 201,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfhM4OAB78eADZ9bSMAaRA826.jpg',
    views: 800,
    comments: 30,
    likes: 150
  },
  {
    id: 201,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcGNCAF55cAAOgW1ZU2yw442.jpg',
    views: 800,
    comments: 30,
    likes: 150
  },
  {
    id: 201,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcNWWABQnDADs7ZJavtts749.jpg',
    views: 800,
    comments: 30,
    likes: 150
  },
  {
    id: 201,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcTbCALvOTAAOgW1ZU2yw218.jpg',
    views: 800,
    comments: 30,
    likes: 150
  },
  {
    id: 201,
    image: 'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfhM4OAB78eADZ9bSMAaRA826.jpg',
    views: 800,
    comments: 30,
    likes: 150
  },
  // 更多收藏的笔记...
])

// 初始化数据
initMockData()

// 显示关注列表
const showFollowingDialog1 = () => {
  showFollowingDialog.value = true
  console.log('加载关注列表数据...')
}

// 显示粉丝列表
const showFollowersDialog1 = () => {
  showFollowersDialog.value = true
  console.log('加载粉丝列表数据...')
}

// 显示笔记列表
const showNotesDialog1 = () => {
  showNotesDialog.value = true
  console.log('加载笔记列表数据...')
}

// 显示获赞列表
const showLikesDialog1 = () => {
  showLikesDialog.value = true
  console.log('加载获赞列表数据...')
}

// 关注用户
const followUser = (user) => {
  user.isFollowing = true
  ElMessage.success(`已关注 ${user.name}`)
}

// 取消关注
const unfollowUser = (user) => {
  user.isFollowing = false
  ElMessage.warning(`已取消关注 ${user.name}`)
}

// 编辑笔记
const editNote = (note) => {
  ElMessage.info(`编辑笔记: ${note.title}`)
  // 实际项目中这里应该跳转到编辑页面
}

// 删除笔记
const deleteNote = (note) => {
  ElMessageBox.confirm(`确定要删除笔记《${note.title}》吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = allNotes.value.findIndex(n => n.id === note.id)
    if (index !== -1) {
      allNotes.value.splice(index, 1)
      user.value.notes--
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 格式化时间
const formatTime = (time) => {
  const now = new Date()
  const diff = now - new Date(time)
  const minute = 60 * 1000
  const hour = 60 * minute
  const day = 24 * hour
  
  if (diff < minute) {
    return '刚刚'
  } else if (diff < hour) {
    return `${Math.floor(diff / minute)}分钟前`
  } else if (diff < day) {
    return `${Math.floor(diff / hour)}小时前`
  } else if (diff < 7 * day) {
    return `${Math.floor(diff / day)}天前`
  } else {
    return new Date(time).toLocaleDateString()
  }
}


// 新增方法
const showNoteDetailDialog = (note) => {
  // 转换数据格式
  currentNote.value = {
    ...note,
    //images: [note.image], // 将单图片转为数组
    images: [
      'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfhNCaAM5gzADtjTQY2JOk286.JPG',
      'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfio9CAZ0_nADrQ8Q6zi3o071.JPG',
      'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfio9yAHy9qAHBTGlC6uSo405.JPG',
      'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfhM4OAB78eADZ9bSMAaRA826.jpg',
      'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfdhECAZeJkADZ9bSMAaRA660.jpg',
      'http://192.168.19.136:8888/group1/M00/00/00/wKgTiGfcT5qAKJcJADZ9bSMAaRA244.jpg'
    ], // 将单图片转为数组
    author: {
      id: 1,
      name: '用户' + Math.floor(Math.random() * 1000),
      avatar: 'https://via.placeholder.com/50',
      isFollowing: false,
      followers: Math.floor(Math.random() * 1000)
    },
    content: note.description + '这里是详细的帖子内容，可以包含更多信息。'.repeat(5),
    comments: generateComments()
  }
  currentImageIndex.value = 0
  showNoteDetail.value = true
}

const generateComments = () => {
  const comments = []
  const names = ['小红', '小明', '小刚', '小美', '小丽']
  const levels = [0, 1, 2] // 评论层级
  
  for (let i = 0; i < 5; i++) {
    const level = levels[Math.floor(Math.random() * levels.length)]
    comments.push({
      id: i,
      author: {
        name: names[Math.floor(Math.random() * names.length)],
        avatar: `https://via.placeholder.com/50?text=${i}`
      },
      content: '这是一条评论内容'.repeat(Math.floor(Math.random() * 3) + 1),
      time: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000),
      likes: Math.floor(Math.random() * 100),
      level,
      images: level === 0 && Math.random() > 0.7 ? 
        [`https://via.placeholder.com/100?text=评论${i}`] : 
        undefined
    })
  }
  return comments
}

const prevImage = () => {
  currentImageIndex.value = (currentImageIndex.value - 1 + currentNote.value.images.length) % currentNote.value.images.length
}

const nextImage = () => {
  currentImageIndex.value = (currentImageIndex.value + 1) % currentNote.value.images.length
}

const followAuthor = () => {
  currentNote.value.author.isFollowing = true
}

const submitComment = () => {
  if (newComment.value.trim()) {
    currentNote.value.comments.unshift({
      id: Date.now(),
      author: {
        name: '当前用户',
        avatar: 'https://via.placeholder.com/50?text=我'
      },
      content: newComment.value,
      time: new Date(),
      likes: 0,
      level: 0
    })
    newComment.value = ''
  }
}

 // 新增状态管理
 const showNoteDetail = ref(false)
const currentNote = ref({
  id: null,
  images: [],
  author: {
    id: null,
    name: '',
    avatar: '',
    isFollowing: false,
    followers: 0
  },
  title: '',
  content: '',
  tags: [],
  comments: []
})
const currentImageIndex = ref(0)
const newComment = ref('')
const isMobile = ref(false)


</script>

<style scoped>
.profile-container {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* .profile-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 30px;
} */

.profile-header {
  display: flex;
  justify-content: center; /* 水平居中 */
  width: 100%;
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 40px; /* 头像和信息之间的间距 */
  max-width: 1200px; /* 限制最大宽度 */
  width: 40%;
}


.profile-info {
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.name-row h2 {
  margin: 0;
  font-size: 24px;
}

.gender-tag {
  margin-left: 10px;
}

.id-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.ip-location {
  color: #999;
}

.bio-tag {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.stats {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

.stat-item:hover {
  transform: scale(1.05);
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.tabs-container {
  margin-bottom: 20px;
}

.tabs-container :deep(.el-tabs__item) {
  font-size: 16px;
  padding: 0 20px;
}

.tabs-container :deep(.el-tabs__item:hover) {
  color: #ff2442;
  background-color: #fff0f0;
}

.tabs-container :deep(.el-tabs__item.is-active) {
  color: #ff2442;
}

.tabs-container :deep(.el-tabs__active-bar) {
  background-color: #ff2442;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.note-item {
  position: relative;
  height: 0;
  padding-bottom: 133%;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s;
}

.note-item:hover {
  transform: scale(1.02);
}

.note-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
}

.note-stats span {
  display: flex;
  align-items: center;
}

.note-stats .el-icon {
  margin-right: 3px;
}

/* 弹窗样式 */
.user-list {
  max-height: 60vh;
  overflow-y: auto;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.user-info {
  flex: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: bold;
  margin-bottom: 5px;
}

.bio {
  font-size: 14px;
  color: #666;
}

.notes-list {
  max-height: 60vh;
  overflow-y: auto;
}

.note-list-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.note-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.note-info {
  flex: 1;
  margin-left: 15px;
}

.note-info h4 {
  margin: 0 0 5px 0;
}

.note-info p {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.note-actions {
  margin-left: 15px;
}

.likes-list {
  max-height: 60vh;
  overflow-y: auto;
}

.like-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.like-info {
  flex: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}

.like-info .username {
  font-weight: bold;
}

.like-info .action {
  font-size: 14px;
  color: #666;
}

.like-info .note-title {
  font-size: 14px;
  color: #ff2442;
  margin-top: 5px;
}

.time {
  font-size: 12px;
  color: #999;
}

 /* 新增弹窗样式 */
 .note-detail-dialog {
  max-width: 90%;
  width: 1000px;
  height: 80vh;
  margin-top: 5vh !important;
}

.note-detail-container {
  display: flex;
  height: calc(80vh - 110px);
}

/* .detail-left {
  flex: 3;
  padding-right: 20px;
  overflow: hidden;
} */

 /* 左侧图片区域 - 全屏无间距 */
 .detail-left {
    flex: 3;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

/* .detail-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
} */

 /* 右侧内容区域 */
 .detail-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }

.image-container {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
}

.nav-arrow {
  cursor: pointer;
  margin: 0 10px;
  font-size: 18px;
}

.image-counter {
  margin: 0 5px;
}

.user-infoo {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}



.user-meta {
  flex: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: bold;
  font-size: 16px;
}

.follow-count {
  font-size: 12px;
  color: #999;
}

.follow-btn {
  margin-left: 10px;
  padding: 8px 15px;
}

.note-content h2 {
  margin-top: 0;
  margin-bottom: 15px;
}

.note-content p {
  white-space: pre-line;
  line-height: 1.6;
}

.note-tags {
  margin: 15px 0;
}

.content-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.comments-section {
  flex: 1;
  overflow-y: auto;
}

.comment-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.comment-content {
  flex: 1;
  margin-left: 10px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.comment-author {
  font-weight: bold;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  margin: 5px 0;
}

.comment-images img {
  max-width: 100px;
  max-height: 100px;
  margin-right: 5px;
  margin-top: 5px;
  cursor: pointer;
}

.comment-actions {
  display: flex;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.comment-actions span {
  margin-right: 15px;
  cursor: pointer;
}

.comment-actions .el-icon {
  margin-right: 3px;
}

.dialog-footer {
  padding: 10px 0;
}

.comment-input {
  width: 100%;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .note-detail-container {
    flex-direction: column;
    height: calc(100vh - 150px);
  }
  
  .detail-left {
    padding-right: 0;
    height: 40vh;
  }
  
  .detail-right {
    height: calc(60vh - 100px);
  }
  
  .note-detail-dialog {
    margin-top: 0 !important;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
  }
}

/* 图片容器样式 */
.image-container {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 两侧导航箭头样式 */
.side-nav-arrows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* 防止箭头阻挡点击 */
}

.nav-arrow {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  pointer-events: auto; /* 恢复箭头点击 */
  transition: all 0.3s ease;
  margin: 0 15px;
}

.nav-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.nav-arrow .el-icon {
  font-size: 20px;
}

/* 圆点指示器样式 */
.dot-indicators {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(216, 210, 210, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background-color: #474747;
  transform: scale(1.2);
}

.dot:hover {
  background-color: rgba(78, 76, 76, 0.8);
}
</style>